<template>
  <div class="table">
    <div style="display: flex">
      <slot name="table-title"> </slot>
      <column-setting
        v-if="showColumnSetting"
        :columns="columns"
        :id="id"
        @columnChange="columnChange"
      ></column-setting>
    </div>

    <el-table
      :data="tableData"
      :default-sort="{ prop: defaultSortProp, order: defaultSortOrder }"
      :row-style="rowStyle"
      :row-class-name="rowClassName"
      :row-key="getRowKey"
      @sort-change="handleSortChange"
      @filter-change="handleFilterChange"
      @selection-change="selectChange"
      class="myTables"
      ref="myTable"
      :border="border"
      :highlight-current-row="highlightCurrentRow"
      @row-click="rowClick"
    >
      <el-table-column
        v-if="showSelection && tableData.length > 0"
        type="selection"
        width="55"
        align="center"
      >
      </el-table-column>
      <template v-for="column in columnsSetting">
        <el-table-column
          v-if="!column.slot"
          :key="column.key"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minwidth"
          :sortable="column.sortable"
          :filters="column.filters"
          :filter-method="column.filterMethod"
          :filtered-value.sync="column.filteredValue"
          :formatter="column.formatter"
          :show-overflow-tooltip="column.showOverflowTooltip"
          :class-name="column.className"
          :align="column.align"
          :fixed="column.fixed"
        ></el-table-column>
        <el-table-column
          v-else
          :key="column.key"
          :label="column.label"
          :prop="column.prop"
          :min-width="column.width"
          :align="column.align"
          :fixed="column.fixed"
          :sortable="column.sortable"
          :filters="column.filters"
          :filter-method="column.filterMethod"
          :filtered-value.sync="column.filteredValue"
          :formatter="column.formatter"
          :show-overflow-tooltip="column.showOverflowTooltip"
          :class-name="column.className"
        >
          <template slot-scope="scope">
            <slot :name="column.slot" :scope="scope.$index" :row="scope.row" />
          </template>
        </el-table-column>
        <!-- <slot v-else :name="column.slotName" :row="row" /> -->
      </template>
      <slot name="extra-columns"></slot>
    </el-table>
  </div>
</template>

<script>
import columnSetting from "./columnSetting.vue";
export default {
  name: "MyTable",
  components: { columnSetting },
  props: {
    id: {
      type: [String, Number],
      required: false,
      default: "",
    },
    columns: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    border: {
      type: Boolean,
      default: false,
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 0,
    },
    defaultSortProp: {
      type: String,
      default: "",
    },
    defaultSortOrder: {
      type: String,
      default: "",
    },
    rowStyle: {
      type: Function,
      default: () => null,
    },
    rowClassName: {
      type: Function,
      default: () => null,
    },
    getRowKey: {
      type: String,
      default: "id",
    },
    disableCheckboxes: {
      type: Boolean,
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    selectable: {
      type: Function,
      default: () => null,
    },
    showColumnSetting: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibleColumns: [],
      columnsSetting: [],
    };
  },
  created() {
    this.columnsSetting = this.columns;
  },
  mounted() {
    // const user = JSON.parse(localStorage.getItem("USER_INFO")).name;
    const user = "123";
    if (
      JSON.parse(localStorage.getItem(`${user}:${this.$route.name}-${this.id}`))
    ) {
      const storedColumns = JSON.parse(
        localStorage.getItem(`${user}:${this.$route.name}-${this.id}`)
      );
      this.columnsSetting = storedColumns
        .filter((column) => {
          const checked = column.visible !== false;
          return checked;
        })
        .filter((value) => value.checked === undefined || value.checked);
    }
  },
  computed: {
    tableData() {
      return this.data.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  watch: {
    columnSetting: {
      immediate: true,
      deep: true,
      handler() {
        this.columnSetting = this.columns;
        this.columnsSetting = this.columnSetting
          .filter((column) => {
            const checked = column.visible !== false;
            return checked;
          })
          .filter((value) => value.checked === undefined || value.checked);
      },
    },
  },
  methods: {
    handleSortChange({ prop, order }) {
      this.$emit("sort-change", { prop, order });
    },
    handleFilterChange(filters) {
      this.$emit("filter-change", filters);
    },
    selectChange(val) {
      this.$emit("selectChange", val);
    },

    rowClick(row) {
      this.$emit("rowClick", row);
    },
    columnChange(val) {
      // this.columnsSetting = val;
      this.columnsSetting = val
        .filter((column) => {
          const checked = column.visible !== false;
          return checked;
        })
        .filter((value) => value.checked === undefined || value.checked);
      //   console.log(this.columnSetting);
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}
.myTables {
  //   border: 1px solid #dcdee2;
  margin-top: 20px;
  //   border-bottom: unset;
}
</style>
